<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
    <script>
        $(function () {
            // 先绑定事件
            $("#accountNameId").blur(function () {
                $.ajax(
                    {
                        // 请求方式
                        type: "GET",
                        // 请求的路径
                        url: "AccountServlet",
                        // 超时
                        timeout:2000,
                        // 期望得到的数据类型  text
                        dataType:"text",
                        // 数据
                        //data:{flag:"login",username:"admin"}
                        //  默认异步
                        async:true,
                        data: {flag:"checkName",accountName:$("#accountNameId").val()},
                        // 响应成功执行该函数
                        success: function(result,status,xhr){
                            if(result=='ok'){
                                $("div:first").html("该用户名可以使用");
                            }else{
                                $("div:first").html("该用户名已被占用");
                            }
                        },
                        // 响应错误执行该函数
                        error:function(){
                            alert("查询超时,请再次重试");
                        },
                        // 最终执行
                        complete:function(){
                            console.log("最终执行");
                        }
                    }
                );
            });
        });
    </script>
</head>
<body>
    <div></div>
    <form action="AccountServlet?flag=checkName" method="post">
        用户名:<input type="text" name="accountName" id="accountNameId" ><br>
        <input type="submit" value="注册">
    </form>
</body>
</html>
